<template>
  <div>
    <div class="score-card">
      <div class="score-card-left">左</div>
      <div class="score-card-middle">中</div>
      <div class="score-card-right">右</div>
    </div>
    <div class="example-line"></div>
    <div class="example-incline"></div>
    <div class="example-tri-a"></div>
    <div class="example-tri-b"></div>
    <div class="example-tri-c"></div>
    <div class="example-circle"></div>
    <div class="example-circle-line"></div>
    <div class="example-arrow"></div>
    <div class="example-arrow-incline"></div>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
export default {
  name: "CssFirst",
  components: {},
  mixins: [],
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.score-card {
  min-height: 200px;
  display: flex;
  justify-content: space-between;
  background-color: burlywood;
  .score-card-left {
    background-color: #881f90;
  }
  .score-card-middle {
    //margin-left: 100px;
    margin: 10px 0px 10px 100px;
    //background-color: indianred;
    border-right: 4px solid darkgreen;
  }
  .score-card-right {
    background-color: #8a9012;
  }
}
.example-line {
  background-color: #49908b;
  height: 6px;
  width: 600px;
}
.example-incline {
}
.example-tri-a {
  background-color: #904a13;
  width: 0px;
  height: 0px;
  //border: 100px solid indianred;
  border-top: 100px solid indianred;
  border-right: 100px solid dodgerblue;
  border-bottom: 100px solid yellow;
  border-left: 100px solid green;
}
.example-tri-b {
  background-color: #904a13;
  width: 0px;
  height: 0px;
  border-top: 100px solid indianred;
  border-right: 100px solid dodgerblue;
  border-bottom: 100px solid yellow;
  border-radius: 50px;
}
.example-tri-c {
  //background-color: #904a13;
  width: 0px;
  height: 0px;
  border-top: 100px solid transparent;
  //border-top: 100px solid indianred;

  //border-right: 100px solid transparent;
  border-right: 100px solid dodgerblue;
  transform: rotate(30deg);
}
.example-circle {
  background-color: #90660f;
  height: 100px;
  width: 100px;
  border-radius: 100%;
}
.example-arrow {
  background-color: #d5f3e4;
  height: 10px;
  margin: 10px;
  width: 400px;
  position: relative;
  transform: rotate(-45deg);
}
.example-arrow::after {
  content: "";
  display: block;
  position: absolute;
  //background-color: #90660f;
  width: 0px;
  height: 0px;
  right: -10px;
  top: -5px;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid palevioletred;
}
</style>
